<template>
	<!-- 首页 -->
	<view class="content">
		<top imgSrc="../../static/img/Logo-ERoad-文字版-1.png"></top>
		<view class="hint">
			<view class="hintImg">
				<image src="../../static/img/Logo_ERoad-圆.png" mode="widthFix"></image>
			</view>
			<view class="hintContent" v-if="login">
				温馨提示:11月1号由于天气原因，暂停发
			</view>
			<view class="loginHintContent" v-else>登录享受掌上订票服务~
				<view class="login" @tap="loginApp">登录</view>
				<image src="../../static/img/icon-error.png" mode="widthFix" class="errorLogin"></image>
			</view>
		</view>

		<view class="pattern">
			<text v-for="item in pattern" :key="item.id" :class="patternActive===item.id?'active':''"
				@click="handlePattern(item.id)">{{item.name}}</text>
		</view>

		<view class="inf">
			<view class="bgImg">
				<image src="../../static/img/bg.png" class="bgImg" mode="widthFix"></image>
			</view>

			<view class="location">
				<view class="depart">
					<image src="../../static/img/icon-Location-01.png" mode="widthFix"></image> 出发站
				</view>
				<view class="destination"> 目的地
					<image src="../../static/img/icon-Location-02.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="place">
				<view class="site">
					<text>韩师站 </text>
					<image src="../../static/img/icon-选中-01.png" mode="widthFix"></image>
				</view>
				<view class="site" @tap="toSelectSite">
					<text>{{selectCity}}</text>
					<image src="../../static/img/icon-选中-02.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="timeBox">
				<text>2023 11-12</text>
				<view class="week">
					<text>星期日</text>
					<text>SUNDAY</text>
				</view>
			</view>

			<view class="search" @tap="toSearch()">立即查询</view>


		</view>

	</view>
</template>

<script>
	import top from "../../components/top/top.vue"
	export default {
		data() {
			return {
				pattern: [{
						id: 0,
						name: "城际巴士"
					},
					{
						id: 1,
						name: "跨市专车"
					},
				],
				patternActive: 0,
				login: false,
				selectCity: "潮州市"
			}
		},
		components: {
			top,
		},
		onShow() {
			const city = uni.getStorageSync('city');
			if(uni.getStorageSync('openid')){
				this.login = true
			}
			this.selectCity = city
			// console.log(city)
		},
		methods: {
			// 选项卡
			handlePattern(id) {
				this.patternActive = id
			},
			loginApp() {
				uni.getUserProfile({
					desc: '获取头像',
					success: (getUserProfileRes) => {
						this.login = true;
						uni.login({
							"provider": "weixin",
							"onlyAuthorize": true, // 微信登录仅请求授权认
							success: function(event) {
								const {
									code
								} = event
								uni.request({
									url: 'http://0bwh5wod67l4.ngrok.xiaomiqiu123.top/user/getWxInfo',
									method: "POST",
									data: {
										code: event.code,
										userAlias: getUserProfileRes.userInfo.nickName
									},
									success: (res) => {
										//获得token完成登录
										const openid = res.data.data.openid
										const avatarUrl = getUserProfileRes.userInfo.avatarUrl
										uni.setStorageSync('openid', openid)
										uni.setStorageSync('avatarUrl', avatarUrl)
									}
								});
								//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。

							},
							fail: function(err) {
								// 登录授权失败  
								// err.code是错误码
							}
						})
					}
				})


			},
			// 跳转搜索页
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			// 跳转站点选择页面
			toSelectSite() {
				uni.navigateTo({
					url: '/pages/selectSite/selectSite'
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		height: 100%;

		.hint {
			height: 116rpx;
			display: flex;
			align-items: center;

			.hintContent {
				width: 560rpx;
				height: 76rpx;
				line-height: 76rpx;
				margin-left: 12rpx;
				background: #FBC8C1;
				border-radius: 72rpx;
				padding-left: 36rpx;
				font-size: 28rpx;
				font-family: Inter, Inter;
				color: #545454;
				box-sizing: border-box;
			}

			.loginHintContent {
				width: 560rpx;
				height: 76rpx;
				display: flex;
				align-items: center;
				margin-left: 12rpx;
				background: #FBC8C1;
				border-radius: 72rpx;
				padding-left: 36rpx;
				font-size: 28rpx;
				font-family: Inter, Inter;
				color: #545454;
				box-sizing: border-box;
				justify-content: space-around;

				.login {
					font-size: 28rpx;
					font-family: Inter, Inter;
					font-weight: 500;
					color: #EB6A58;
					width: 134rpx;
					height: 44rpx;
					background: #FAFAFA;
					border-radius: 500rpx;
					text-align: center;
				}

				.errorLogin {
					width: 64rpx;
					position: fixed;
					left: 101rpx;
					top: 240rpx;
				}
			}

			.hintImg {
				margin-left: 32rpx;

				image {
					width: 114rpx;
				}

			}

		}

		.pattern {
			display: flex;
			align-items: center;
			height: 134rpx;
			font-size: 40rpx;
			font-family: Inter, Inter;
			font-weight: 400;
			color: #545454;

			text {
				display: block;
				margin-left: 44rpx;
			}

			.active {
				width: 192rpx;
				height: 58rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #333333;
				background: linear-gradient(68deg, #FF9C8F 0%, rgba(243, 161, 21, 0) 100%) no-repeat;
				background-position: 48rpx 28rpx;
			}
		}

		.inf {
			width: 630rpx;
			height: 678rpx;
			border-radius: 24rpx;
			margin: 16rpx auto 0 auto;
			background-color: transparent;

			.bgImg {
				width: 630rpx;
				position: fixed;
				left: 60rpx;
				top: 426rpx;
				z-index: -1;
			}

			.location {
				padding-top: 60rpx;
				display: flex;
				font-size: 36rpx;
				font-family: Broadway, Broadway;
				font-weight: 400;
				color: #545454;
			}

			.depart {
				display: flex;
				align-items: center;

				image {
					margin: auto 16rpx auto 32rpx;
					width: 64rpx;
				}
			}

			.destination {
				display: flex;
				align-items: center;
				margin-left: 182rpx;

				image {
					width: 64rpx;
					margin-left: 16rpx;
				}
			}

			.place {
				display: flex;
				margin-top: 16rpx;

				.site {
					width: 160rpx;
					margin-left: 92rpx;
					font-size: 48rpx;
					font-family: Inter, Inter;
					font-weight: bold;
					color: #333333;

					text {
						display: block;
					}

					image {
						float: right;
						width: 108rpx;
					}
				}

				.site:nth-child(2) {
					margin-left: 158rpx;
				}

			}

			.timeBox {
				width: 468rpx;
				height: 100rpx;
				margin: 54rpx auto 54rpx auto;
				display: flex;
				align-items: center;
				background: #F7C269;
				border-radius: 500rpx;
				font-family: PingFang SC, PingFang SC;
				color: #fff;

				text:nth-child(1) {
					display: block;
					margin-left: 48rpx;
					font-weight: 800;
					font-size: 40rpx;
				}

				.week {
					display: flex;
					width: 124rpx;
					flex-direction: column;
					margin-left: 38rpx;

					text {
						margin-left: 0;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
					}
				}
			}


			.search {
				margin: 0 auto;
				width: 320rpx;
				height: 87rpx;
				background: #EB6A58;
				border-radius: 116rpx;
				text-align: center;
				line-height: 87rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #fff;
			}
		}


	}
</style>
